<template>
  <label
    role="radio"
    class="el-radios"
    :class="{'is-border': isBorder,'is-disabled': isDisabled,'is-active-border': (isBorder && model === label)}"
    :aria-checked="model === label"
    :aria-disabled="isDisabled"
  >
    <span class="el-radios-wrapper" :class="{
        'is-checked': model === label,
      }">
      <span class="el-radios__inner"></span>
      <input
        class="el-radios__original"
        type="radio"
        v-model="model"
        :value="label"
        aria-hidden="true"
        :disabled="isDisabled"
        @change="changeHandle"
        :name="name"
      />
    </span>
    <span class="el-radios-lable">
      <slot></slot>
    </span>
  </label>
</template>

<script>
export default {
  components: {},
  props: {
    isDisabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    // 父页面中v-model，子页面value接收
    value: {
      type: String,
      default: ''
    },
    isBorder: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: "radios"
    }
  },
  data() {
    return {
    }
  },
  created() { },
  mounted() {
  },
  activated() { },
  updated() { },
  methods: {
    // input改变
    changeHandle() {
      this.$nextTick(() => {
        // 抛出改变事件，调用页面可直接使用this.model
        this.$emit('change', this.model)
      });
    },
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

      // 寻找父级，如果父级不是符合的组件名，则循环向上查找
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
      // 找到符合组件名称的父级后，发布其事件。
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));

      }
    }
  },
  computed: {
    // 判断是否有组el-radios-group
    isGroups() {
      let parent = this.$parent;
      while (parent) {
        if (parent.$options._componentTag === 'el-radios-group') {
          this._radioGroup = parent;   // 里面包含el-radios-group里的value
          return true
        } else {
          parent = parent.$parent;
          return false;
        }
      }
    },
    model: {
      // 获取父页面绑定的model值，有组就用组绑定的model，无组就用radios绑定的model
      get() {
        return this.isGroups ? this._radioGroup.value : this.value;
      },
      // 实现双向绑定model
      set(val) {
        // 实现双向数据绑定
        if (this.isGroups) {
          this.dispatch('ElRadiosGroup', 'input', [val]);
        } else {
          this.$emit('input', val);
        }
        // this.$refs.radios && (this.$refs.radios.checked = this.model === this.label);
      }
    }
  },
  watch: {},
}
</script>
<style scoped lang='scss'>
$color: #409eff;
$colorDisabled: #c0c4cc;
.el-radios {
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
  line-height: 1;
  padding: 10px;
  cursor: pointer;
  // 禁用
  &.is-disabled {
    cursor: not-allowed;
    .el-radios__inner {
      border-color: #e4e7ed !important;
      background: #f5f7fa !important;
      &::after {
        background: $colorDisabled !important;
      }
    }
    .el-radios-lable {
      color: $colorDisabled;
    }
  }
  .el-radios-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    // 中间的小圆
    .el-radios__inner {
      border: 1px solid $color;
      width: 100%;
      height: 100%;
      display: inline-block;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10000;
    }
    // input
    .el-radios__original {
      opacity: 0;
    }
  }
  .is-checked .el-radios__inner {
    background: $color;

    &::after {
      transform: translate(-50%, -50%);
      width: 7px;
      height: 7px;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      background: #fff;
      content: "";
      transition: transform 0.15s ease-in;
    }
  }
}
// 有边框时未激活
.el-radios.is-border {
  border: 1px solid #dcdfe6;
}
// 有边框激活
.el-radios.is-active-border {
  border: 1px solid $color;
}
</style>